<!--工艺系列tab-->
<template>
  <div class="series-tab" v-if="detailList.length > 1 && currentIndex === tabIndex">
    <div
      class="series-tab-item"
      v-for="(item,index) in detailList"
      :class="seriesIndex === index ? 'active': ''"
      :key="item.id"
      @click="handleSeriesTab(index)"
    >
      {{item.processSectionSeriesName}}
    </div>
  </div>
</template>

<script>
export default {
  name: 'seriesTab',
  data () {
    return {
      seriesIndex: 0,
    }
  },

  props:{
    detailList:{
      type: Array,
      default() {
        return []
      }
    },
    currentIndex:{
      type: Number,
      default: 0
    },
    tabIndex:{
      type: Number,
      default: 0
    }
  },

  components: {},

  computed: {},

  mounted() {},

  methods: {
    handleSeriesTab(index){
      this.seriesIndex = index
      this.$emit('seriesTabIndexFunc',index)
    }
  }
}

</script>
<style lang="less" scoped>
.series-tab {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
  .series-tab-item{
    min-width:60px;
    height:28px;
    border-radius:2px;
    font-size:14px;
    font-family:PingFangSC-Regular,PingFang SC;
    font-weight:400;
    color:rgba(255,255,255,1);
    padding: 0 5px;
    padding-top: 0.8vh;
    text-align: center;
    margin: 0 17px;
    background: transparent;
    transition: .5s all ease-in-out;
    &.active{
      background:rgba(69,109,230,1);
    }
  }
}
</style>
